<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String filePath = basePath+"/view/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> OFCloud </title>
    
   	
	<link rel="stylesheet" type="text/css" href="view/rec/css/base.css">
	<link rel="stylesheet" type="text/css" href="view/rec/css/index.css">
	
	
	
    <script src="view/plugins/jquery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="view/rec/js/jQueryColor.js"></script>
	<!--这个插件是瀑布流主插件函数必须-->
	<script type="text/javascript" src="view/rec/js/jquery.masonry.min.js"></script>
	<script type="text/javascript" src="view/rec/js/jquery.infinitescroll.min.js"></script>
	<!--这个插件只是为了扩展jquery的animate函数动态效果可有可无-->
	<script type="text/javascript" src="view/rec/js/jQeasing.js"></script>
	<script src="view/bac/js/ofc-pub.js"></script>
	<script type="text/javascript">
	/*
		抛开瀑布流布局各种乱七八糟的算法，基于masonry的瀑布流，很是简单的，而且通过扩展animate,能实现瀑布流布局的晃动、弹球等效果。
		masonry还有很多参数我这里注解了常用的参数
	 */
		$(function(){
				
			
	        var $window = $(window);  
	        var $document = $(document);
				
				/*瀑布流开始*/
				var container = $('.waterfull ul');
				var loading=$('#imloading');
				// 初始化loading状态
				loading.data("on",true);
				/*判断瀑布流最大布局宽度，最大为1280*/
				function tores(){
					var tmpWid=$(window).width();
					if(tmpWid>1280){
						tmpWid=1280;
					}else{
						var column=Math.floor(tmpWid/320);
						tmpWid=column*320;
					}
					$('.waterfull').width(tmpWid);
				}
				tores();
				$(window).resize(function(){
					tores();
				});
				container.imagesLoaded(function(){
				  container.masonry({
				  	columnWidth: 320,
				    itemSelector : '.item',
				    isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
				    isAnimated: true,//是否采用jquery动画进行重拍版
				    isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
				    isResizable: true,//是否自动布局默认true
				    animationOptions: {
						duration: 800,
						easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
						queue: false//是否队列，从一点填充瀑布流
					}
				  });
				});
				
				
				
				container.infinitescroll({
			        navSelector  : '#navigation',
			        nextSelector : '#navigation a',
			        itemSelector : '.item',
			        animate: true,
			        dataType: 'json',//可以是json
			        template: function(data) {
			        	var sqlJson = data.detail.gallery.list
						var html = "";
			        	for(var i in sqlJson){
							var url = sqlJson[i].req_url;
							html+="<li class='item'><a href='getGalleryContent?serialId="+sqlJson[i].serial_id+"' target='_blank' class='a-img'><img src='"+url.split("@")[0]+"'></a>";
							html+="<h2 class='li-title'>"+sqlJson[i].blog_title+"</h2>";
							html+="<div class='qianm clearfloat'>";
							html+="<span class='sp1'><b>"+sqlJson[i].click_num+"</b>浏览</span>";
							html+="<span class='sp2'>"+sqlJson[i].click_num+"</span><span class='sp3'>"+sqlJson[i].update_time+"&nbsp;By</span></div></li>";		
						}
                    	return html;
	                },
			        loading: {
			            finishedMsg: '没有更多的页面加载。',
			            loadingText:'加载中'
			            //img: 'images/loading.gif'
			        }
			    },function(newElements){
		    		console.log(newElements);
		    		console.log("OK...");
		            var $newElems = $(newElements).css({ opacity: 0}).appendTo(container);
					$newElems.imagesLoaded(function(){
						$newElems.animate({ opacity: 1},10);
						container.masonry( 'appended', $newElems,true);
						loading.data("on",true).fadeOut();
			        }); 
		    		

		        });
				
				function loadImage(url) {
				     var img = new Image(); 
				     //创建一个Image对象，实现图片的预下载
				      img.src = url;
				      if (img.complete) {
				         return img.src;
				      }
				      img.onload = function () {
				       	return img.src;
				      };
				 };
				 loadImage('view/rec/images/one.jpg');
				/*item hover效果*/
				var rbgB=['#71D3F5','#F0C179','#F28386','#8BD38B'];
				$('#waterfull').on('mouseover','.item',function(){
					var random=Math.floor(Math.random() * 4);
					$(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
				});
				$('#waterfull').on('mouseout','.item',function(){
					$(this).stop(true).animate({'backgroundColor':'#fff'},1000);
				});
		})
		
		
		function getGalleryData(){
		
			var nextPageNum =$("#pageNum").val();
			
			nextPageNum = parseInt(nextPageNum)+1;
			
			var par={
    				"page":nextPageNum,
    				"tagNo":''
    				}
    		var result = doPost("getGalleryPage", par);
			var objlist = result.detail.gallery.list;
			$("#pageNum").val(nextPageNum);
			return objlist;
		}
    </script>
    <style type="text/css">
    	.sub-menu {top:0px}
    	.sub-menu.fixed{left:0px}
    </style>

</head>
<body>
	<div class="content">
		<!-- 瀑布流样式开始 -->
		<div class="waterfull clearfloat" id="waterfull">
			<ul>
				<c:forEach items="${gallery.list }" var="obj">
				<li class="item">
					<a href="getGalleryContent?serialId=${obj.serial_id }" target="_blank" class="a-img">
						<img src="${obj.blog_content}" alt="">
						
					</a>
					<h2 class="li-title" title="${obj.blog_title}">${obj.blog_title}</h2>
					
					<div class="qianm clearfloat">
						<span class="sp1"><b>${obj.click_num}</b>浏览</span>
						<span class="sp2">${obj.update_user_name}</span>
						<span class="sp3">${obj.update_time} &nbsp;By</span>
					</div>
				</li>
				</c:forEach>
			</ul>
		</div>
	</div>  
	<div id="navigation" align="center">         <!-- 页面导航-->  
		<a href="getGalleryPage?page=1"></a>        <!-- 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->  
	</div> 
		<!-- loading按钮自己通过样式调整 -->
	<div id="imloading" style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
		素材加载中.....
	</div>
	<input type="hidden" id="pageNum" value="1">

</body>
</html>